<template>
  <a-layout class="left-layout" :class="[`al-layout-theme-${theme}`]">
    <a-layout-header class="left-layout__header" :style="topBarStyle">
      <div class="w-full h-full flex flex-row justify-between items-center">
        <div class="h-full flex flex-row justify-between items-center gap-x-4">
          <div class="left-layout__logo-wrapper">
            <img src="@/assets/logo.png" />
          </div>
          <div v-if="layoutConfig.titleDisplay" class="text-lg left-layout__title" :style="headerStyle">
            {{ layoutConfig.titleSetting || bossTitleSetting }}
          </div>
        </div>
        <div class="h-full flex flex-row justify-between items-center gap-x-4">
          <nav-to-workbench v-if="layoutConfig.workbenchDisplay" :buttonStyle="buttonStyle" />
          <a-popover placement="bottom" overlayClassName="header-popover" v-if="h5ProductUrl">
            <template #content>
              <vue-qrcode :value="h5ProductUrl" :options="{ width: 120 }" />
              <div class="ql-align-center">扫码后，进入移动端</div>
            </template>
            <div style="cursor: pointer">
              <QrcodeOutlined class="header-qrcode" />
              <span style="margin-left: 5px">移动端入口</span>
            </div>
          </a-popover>
          <!-- 帮助中心 -->
          <a-button
            v-if="layoutConfig.helpCenterDisplay"
            type="text"
            class="horizontal-btn"
            @click="jumpHelpDocs"
            :style="buttonStyle"
          >
            帮助中心
          </a-button>
          <user-info />
        </div>
      </div>
    </a-layout-header>
    <a-layout :style="contentStyle">
      <aside-panel />
      <a-layout>
        <a-layout-content class="left-layout__content-wrapper">
          <router-view v-slot="{ Component, route }">
            <transition name="fade">
              <component :is="Component" :key="route.fullPath" />
            </transition>
          </router-view>
        </a-layout-content>
        <a-layout-footer v-if="layoutConfig.footerDisplay">{{ layoutConfig.footerSettings }} </a-layout-footer>
      </a-layout>
    </a-layout>
  </a-layout>
</template>

<script setup lang="ts">
  import { computed, CSSProperties } from 'vue'
  import UserInfo from './components/UserInfo.vue'
  import AsidePanel from './components/AsidePanel.vue'
  import navToWorkbench from './components/navToWorkbench.vue'
  import layoutConfig from '@/layouts/layoutConfig.json'
  // import VueQrcode from '@chenfengyuan/vue-qrcode'
  import { useSystemStore } from '@/store/modules/system'
  import { localGet } from '@/utils/index';

  const bossTitleSetting = computed(() => {
    return localGet('al__ALL_PRODUCT_INFO')?.showName
  })
  
  const systemStore = useSystemStore()
  const h5ProductUrl = computed(() => systemStore.currentH5ProductUrl)
  const buttonStyle = computed(() => {
    const style = {
      color: 'rgba(0,0,0,0.85)'
    } as CSSProperties
    if (layoutConfig.themeSettings === 'CUSTOM') {
      style.color = layoutConfig.topMenuArea.textColor
    } else {
      style.color = 'rgba(0,0,0,0.85)'
    }

    return style
  })

  const headerStyle = computed(() => {
    const style: CSSProperties = {
      zIndex: 1,
      textAlign: 'left',
      fontWeight: 400,
      fontStyle: 'normal',
      textDecoration: 'none'
    }
    style.color = layoutConfig.titleStyle.color
    style.textAlign =
      layoutConfig.titleStyle.align === 'ALIGN_LEFT'
        ? 'left'
        : layoutConfig.titleStyle.align === 'ALIGN_RIGHT'
        ? 'right'
        : 'center'
    if (layoutConfig.titleStyle.bold) {
      style.fontWeight = 700
    }
    if (layoutConfig.titleStyle.italic) {
      style.fontStyle = 'italic'
    }
    if (layoutConfig.titleStyle.underline) {
      style.textDecoration = 'underline'
    }

    return style
  })
  const topBarStyle = computed(() => {
    const style: CSSProperties = {}
    if (layoutConfig.sizeSettings && layoutConfig.sizeSettings.topHeight) {
      style.height = layoutConfig.sizeSettings.topHeight + 'px'
    }
    return style
  })
  const contentStyle = computed(() => {
    const style: CSSProperties = {}
    if (layoutConfig.sizeSettings && layoutConfig.sizeSettings.topHeight) {
      style.top = layoutConfig.sizeSettings.topHeight + 'px'
    }
    return style
  })
  const theme = computed(() => {
    if (layoutConfig.themeSettings === 'CUSTOM') {
      return 'custom'
    } else if (layoutConfig.themeSettings === 'DARK_COLOR') {
      return 'dark'
    } else {
      return 'light'
    }
  })
  // 帮助中心
  function jumpHelpDocs() {
    const url = `${location.origin}${layoutConfig.helpCenterSettings}`
    window.open(url)
  }
</script>
<style lang="less">
  .left-layout {
    height: 100%;

    .left-layout__header {
      background-color: @layout-header-background;
      padding: @layout-header-padding;
      .horizontal-btn:hover {
        background: transparent;
      }
    }

    .left-layout__logo-wrapper {
      width: 32px;
      display: flex;
      height: 32px;
    }

    .left-layout__title {
      min-width: 130px;
    }
    .left-layout__header + .@{ant-prefix}-layout {
      position: fixed;
      top: @layout-header-height;
      left: 0;
      right: 0;
      bottom: 0;
    }
    .left-layout__content-wrapper {
      height: 100%;
      width: 100%;
      overflow: auto;
      padding: 24px 24px 0;
    }
    .@{ant-prefix}-layout-footer {
      padding: 0;
      height: 24px;
      line-height: 24px;
      text-align: center;
    }
  }
</style>
